<template>

  <div :class="layoutCls">
    <t-head-menu :class="menuCls" :theme="menuTheme" expand-type="popup" :value="active">
      <template #logo>
        <span v-if="showLogo" class="header-logo-container" @click="openHome">
          <logo-full class="t-logo" />
        </span>
        <div v-else class="header-operate-left">
          <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
            <t-icon class="collapsed-icon" name="view-list" />
          </t-button>
          <!-- <search :layout="layout" /> -->
        </div>
      </template>
      <template v-if="layout !== 'side'" #default>
        <menu-content class="header-menu" :nav-data="menu" />
      </template>
      <template #operations>
        <div class="operations-container">
          <!-- 搜索框 -->
          <!-- <search v-if="layout !== 'side'" :layout="layout" /> -->

          <!-- 全局通知 -->
         <!-- <notice /> -->
          <t-space>

            <div style="padding:3px; color:cornflowerblue;">
               <Version></Version>
            </div>

            <div style="padding: 3px;display:none">
              <t-tooltip placement="bottom" content="联系客服">
                <t-popup>
                  <t-link theme="default" hover="color">
                    <icon name="help-circle" size="18px" /> &nbsp;客服
                  </t-link>

                  <template #content>
                    <t-image src="https://u.rscode.cn/kefu-qrcode.png" fit="cover"
                      :style="{ width: '200px' }"></t-image>
                    <div style="margin-top: 5px; text-align: center">微信扫码联系客服</div>
                  </template>
                </t-popup>
              </t-tooltip>
            </div>

            <div v-if="userStore.userInfo.role!=2" style="padding: 3px;display:none">
              <t-tooltip placement="bottom" content="积分充值">

                <t-link theme="default" hover="color" @click="openRecharge">
                  <icon name="money-circle" size="18px" /> &nbsp;充值
                </t-link>
              </t-tooltip>
            </div>
            <div v-if="userStore.userInfo.role!=2&&showVip===true" style="padding: 3px;display:none">
              <t-tooltip placement="bottom" content="VIP优惠">

                <t-link theme="default" hover="color" @click="openVip">
                  <icon name="discount" size="18px" /> &nbsp;优惠
                </t-link>
              </t-tooltip>
            </div>
            <div v-if="userStore.userInfo.role!=2" style="display:none">
              &nbsp;
              <t-tooltip placement="bottom" content="消费时使用">
                <t-link theme="default" hover="color" @click="openUser">积分:{{ userStore.assetInfo.Integral }} &nbsp;
                </t-link>
               </t-tooltip>

              <t-link v-if="showVip===true" theme="default" hover="color" @click="openShare">金币:{{ userStore.assetInfo.Gold }}</t-link>
            </div>

            <div v-if="userStore.userInfo.user_id!=''" style="padding: 3px;">
                <t-dropdown :min-column-width="120" trigger="click" >
              <template #dropdown>
                <t-dropdown-menu>
					<t-dropdown-item class="operations-dropdown-container-item" @click="openPasswordSet">
					  <t-icon name="user-circle"></t-icon>修改密码
					</t-dropdown-item>
                 <!-- <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
                    <t-icon name="user-circle"></t-icon>个人中心
                  </t-dropdown-item> -->
                  <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                    <t-icon name="poweroff"></t-icon>退出登录
                  </t-dropdown-item>
                </t-dropdown-menu>
              </template>
              <t-button class="header-user-btn" theme="default" variant="text">
                <template #icon>
                  <t-icon class="header-user-avatar" name="user-circle" />
                </template>
                <div class="header-user-account">{{ userStore.userInfo.nick }}</div>
                <template #suffix><t-icon name="chevron-down" /></template>
              </t-button>
            </t-dropdown>
            </div>
            <t-tooltip v-else placement="bottom" content="点击登录" >
              <t-button theme="default" shape="square" variant="text" @click="toggleLogin" style="width: 60px">
                <t-icon name="login" /> 登录
              </t-button>
            </t-tooltip>
          </t-space>


          <!-- <t-tooltip placement="bottom" content="系统设置">
            <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
              <t-icon name="setting" />
            </t-button>
          </t-tooltip> -->
        </div>
      </template>
    </t-head-menu>

  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue';
  import { computed ,ref,defineProps} from 'vue';
  import { useRouter } from 'vue-router';

  import LogoFull from '@/assets/assets-logo-full.svg?component';
  import { prefix } from '@/config/global';
  import { getActive } from '@/router';
  import { useSettingStore, useUserStore } from '@/store';
  import type { MenuRoute } from '@/types/interface';
  import { Icon } from 'tdesign-icons-vue-next';
  import MenuContent from './MenuContent.vue';
  import Version from './Version.vue'

  import $eventBus from '@/utils/eventBus';
  const showVip=ref(false)

  const props = defineProps({
    theme: {
      type: String,
      default: 'light',
    },
    layout: {
      type: String,
      default: 'top',
    },
    showLogo: {
      type: Boolean,
      default: true,
    },
    menu: {
      type: Array as PropType<MenuRoute[]>,
      default: () => [],
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    isCompact: {
      type: Boolean,
      default: false,
    },
    maxLevel: {
      type: Number,
      default: 3,
    },
  });
  const router = useRouter();
  const settingStore = useSettingStore();
  const userStore = useUserStore();

  const toggleLogin = () => {
    $eventBus.emit('OpenLoginEvent');
  };
const handleLogout = () => {
    userStore.logout();
    router.push('/')
  };

  const active = computed(() => getActive());

  const layoutCls = computed(() => [`${prefix}-header-layout`]);

  const menuCls = computed(() => {
    const { isFixed, layout, isCompact } = props;
    return [
      {
        [`${prefix}-header-menu`]: !isFixed,
        [`${prefix}-header-menu-fixed`]: isFixed,
        [`${prefix}-header-menu-fixed-side`]: layout === 'side' && isFixed,
        [`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
      },
    ];
  });
  const menuTheme = computed(() => props.theme as 'light' | 'dark');
  const changeCollapsed = () => {
    settingStore.updateConfig({
      isSidebarCompact: !settingStore.isSidebarCompact,
    });
  };
  const openKf = () => {
    window.location.href = 'https://work.weixin.qq.com/kfid/kfce3f164fb3158068b';
  };
  const handleNav = (url : string) => {
    router.push(url);
  };
  const openHome=()=>{
    router.push('/')
  }


  const openUser = () => {
    router.push({
      path: '/user/index',
    });
  }
  const openShare = () => {
    router.push({
      path: '/user/share',
    });
  }
  const openRecharge = () => {
    $eventBus.emit('openRecharge')
  }
  const openVip=()=>{
    $eventBus.emit('openVip')
  }
const openPasswordSet=()=>{
	$eventBus.emit('openPasswordSet')
}




</script>
<style lang="less" scoped>
  .@{starter-prefix}-header {
    &-menu-fixed {
      position: fixed;
      top: 0;
      z-index: 1001;

      :deep(.t-head-menu__inner) {
        padding-right: var(--td-comp-margin-xl);
      }

      &-side {
        left: 232px;
        right: 0;
        z-index: 10;
        width: auto;
        transition: all 0.3s;

        &-compact {
          left: 64px;
        }
      }
    }

    &-logo-container {
      cursor: pointer;
      display: inline-flex;
    }
  }

  .header-menu {
    flex: 1 1 1;
    display: inline-flex;

    :deep(.t-menu__item) {
      min-width: unset;
    }
  }

  .operations-container {
    display: flex;
    align-items: center;

    .t-popup__reference {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .t-button {
      margin-left: var(--td-comp-margin-l);
    }
  }

  .header-operate-left {
    display: flex;
    align-items: normal;
    line-height: 0;
    padding-left: var(--td-comp-margin-xl);
  }

  .header-logo-container {
    width: 184px;
    height: 26px;
    display: flex;
    margin-left: 24px;
    color: var(--td-text-color-primary);

    .t-logo {
      width: 100%;
      height: 100%;

      &:hover {
        cursor: pointer;
      }
    }

    &:hover {
      cursor: pointer;
    }
  }

  .header-user-account {
    display: inline-flex;
    align-items: center;
    color: var(--td-text-color-primary);
  }

  :deep(.t-head-menu__inner) {
    border-bottom: 1px solid var(--td-component-stroke);
  }

  .t-menu--light {
    .header-user-account {
      color: var(--td-text-color-primary);
    }
  }

  .t-menu--dark {
    .t-head-menu__inner {
      border-bottom: 1px solid var(--td-gray-color-10);
    }

    .header-user-account {
      color: rgba(255, 255, 255, 0.55);
    }
  }

  .operations-dropdown-container-item {
    width: 100%;
    display: flex;
    align-items: center;

    :deep(.t-dropdown__item-text) {
      display: flex;
      align-items: center;
    }

    .t-icon {
      font-size: var(--td-comp-size-xxxs);
      margin-right: var(--td-comp-margin-s);
    }

    :deep(.t-dropdown__item) {
      width: 100%;
      margin-bottom: 0px;
    }

    &:last-child {
      :deep(.t-dropdown__item) {
        margin-bottom: 8px;
      }
    }
  }
</style>

<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
<style lang="less">
  .operations-dropdown-container-item {
    .t-dropdown__item-text {
      display: flex;
      align-items: center;
    }
  }
</style>
